<template>
  <div class="drawer-main">
    <el-dialog
      @open="openDialog"
      :close-on-press-escape="false"
      custom-class="work_dialog"
      class="_drawer"
      style=""
      direction="btt"
      :with-header="false"
      :visible="openScreen"
      :append-to-body="true"
      :show-close="false"
      :wrapperClosable="false"
      :fullscreen="true"
    >
      <div class="tab_box" slot="title">
        <div class="title">远程监控</div>
        <span
          class="el-icon-close"
          style="color: #fff"
          @click="closeDrawer"
        ></span>
      </div>
      <div class="WorkmanshipData" ref="WorkmanshipData">
        <div class="details3_box" ref="piediv">
          <el-table
            :row-class-name="tableRowClassName"
            :data="workTableDataZ8"
            style="width: 100%"
            height="100px"
            v-adaptive="{ bottomOffset: 70 }"
            :header-cell-class-name="headerRowStyle"
          >
            <el-table-column label="阶段" width="50" type="index">
            </el-table-column>
            <el-table-column prop="data1" label="温度控制"> </el-table-column>
            <el-table-column prop="data2" label="温度目标值"> </el-table-column>
            <el-table-column prop="data3" label="温度到温范围">
            </el-table-column>
            <el-table-column prop="data4" label="运行时间(分钟)">
            </el-table-column>
            <el-table-column prop="data5" label="压力控制"> </el-table-column>
            <el-table-column prop="data6" label="压力目标值"> </el-table-column>

            <el-table-column prop="data7" label="结束方式" width="90">
            </el-table-column>
            <el-table-column prop="data8" label="开始时间" width="80">
            </el-table-column>
            <el-table-column prop="data9" label="剩余时间(min)" width="100">
            </el-table-column>
            <el-table-column prop="data10" label="结束时间" width="80">
            </el-table-column>
            <el-table-column prop="data11" label="状态" width="50">
            </el-table-column>
            <el-table-column prop="state" label="操作" width="140">
              <template slot-scope="scope">
                <div class="bg_btns">
                  <i
                    @click="dialogVisible = true"
                    class="el-icon-edit-outline icon_color"
                    style="margin-right: 20px"
                  ></i>
                  <i
                    @click="handeformlutEdit(scope.row)"
                    class="el-icon-document-copy icon_color"
                    style="margin-right: 20px"
                  ></i>
                  <i
                    class="el-icon-video-play icon_color"
                    style="margin-right: 20px"
                  ></i>
                  <i
                    @click="handleDel(scope.$index)"
                    class="el-icon-delete icon_color"
                    style="margin-right: 20px"
                  ></i>
                </div>
                <!-- <i
                  @click="addRow"
                  class="el-icon-plus icon_color"
                  v-if="workTableDataZ8.length - 1 == scope.$index"
                ></i> -->
              </template>
            </el-table-column>
            <el-table-column align="right" fixed="right">
              <template slot="header" slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="addRow(scope.row)"
                  >添 加</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="btns">
          <el-button
            size="mini"
            type="primary"
            style="width: 10%"
            @click="handleExportFrom"
          >
            <img
              class="img_btn"
              src="@/assets/images/applicationCenter/btns_4.png"
              alt=""
            />
            导入配方</el-button
          >
          <el-button
            size="mini"
            type="primary"
            style="width: 10%"
            @click="handlecurve"
          >
            <img
              class="img_btn"
              src="@/assets/images/applicationCenter/btns_1.png"
              alt=""
            />
            曲线预览</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handMsg"
            style="width: 10%"
          >
            <img
              class="img_btn"
              src="@/assets/images/applicationCenter/btns_1.png"
              alt=""
            />参数下装</el-button
          >
          <el-button size="mini" type="primary" style="width: 10%">
            <img
              class="img_btn"
              src="@/assets/images/applicationCenter/btns_3.png"
              alt=""
            />重置</el-button
          >
          <el-button size="mini" style="width: 10%" @click="closeDrawer">
            <i class="el-icon-circle-close"></i>
            取消</el-button
          >
        </div>
        <el-dialog
          title="出炉设置编辑"
          center
          :modal="false"
          :visible.sync="dialogVisible"
          :before-close="handleClose"
        >
          <!-- <span>这是一段信息</span> -->
          <el-form
            style="margin-top: 10px"
            size="mini"
            label-width="auto"
            :model="formLabelAlign"
          >
            <el-form-item label="工艺类型：">
              <el-select
                :popper-append-to-body="false"
                class="w100"
                v-model="formLabelAlign.type"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出炉批次：">
              <el-select
                :popper-append-to-body="false"
                class="w100"
                v-model="formLabelAlign.num"
                placeholder="请选择"
                multiple
                collapse-tags
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出炉提醒：">
              <el-switch v-model="formLabelAlign.tip"> </el-switch>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false"
              >取 消</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-dialog
          title="工艺配方编辑"
          center
          :show-close="false"
          :modal="false"
          :visible.sync="processDialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <div class="tab_box" slot="title">
            <div class="title">工艺配方编辑</div>
            <div
              class="el-icon-close"
              style="color: #fff"
              @click.stop="handleClose1"
            ></div>
          </div>
          <el-form
            style="margin-top: 10px"
            size="mini"
            label-width="auto"
            :model="formLabelAlign2"
          >
            <el-form-item label="温度控制: " prop="data1">
              <el-select
                :popper-append-to-body="false"
                class="w100"
                v-model="formLabelAlign2.data1"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="温度目标值: " prop="data2">
              <el-input
                placeholder="请输入"
                v-model="formLabelAlign2.data2"
              ></el-input>
            </el-form-item>
            <el-form-item label="温度到温范围: " prop="data3">
              <el-input
                placeholder="请输入"
                v-model="formLabelAlign2.data3"
              ></el-input>
            </el-form-item>

            <el-form-item label="运行时间: " prop="data4">
              <el-input
                placeholder="请输入"
                v-model="formLabelAlign2.data4"
              ></el-input>
            </el-form-item>
            <el-form-item label="压力控制: " prop="data5">
              <el-select
                :popper-append-to-body="false"
                class="w100"
                v-model="formLabelAlign2.data5"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options5"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="压力目标值: " prop="data6">
              <el-input
                placeholder="请输入"
                v-model="formLabelAlign2.data6"
              ></el-input>
            </el-form-item>
            <el-form-item label="结束方式: " prop="data7">
              <el-select
                :popper-append-to-body="false"
                class="w100"
                v-model="formLabelAlign2.data7"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options7"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="processDialogVisible = false"
              >取 消</el-button
            >
            <el-button size="small" type="primary" @click="handeformlutSubmit"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </el-dialog>
    <!-- 导入工艺 -->
    <ExportFrom :dialogVisible.sync="formdDalogVisible"></ExportFrom>
    <!-- 曲线预览 -->
    <CurceDia :dialogVisible.sync="curveDialogVisible"></CurceDia>
  </div>
</template>

<script>
import _ from "lodash";
import { mapState, mapGetters } from "vuex";
import ExportFrom from "./ExportFrom.vue";
import CurceDia from "./CurveDia.vue";
export default {
  components: {
    ExportFrom,
    CurceDia,
  },
  props: {
    openScreen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      curveDialogVisible: false,
      formdDalogVisible: false,
      options7: [
        {
          value: "炉膛到温",
          label: "炉膛到温",
        },
        {
          value: "时间到",
          label: "时间到",
        },
        {
          value: "真空到",
          label: "真空到",
        },
        {
          value: "心部温度",
          label: "心部温度",
        },
        {
          value: "表面温度",
          label: "表面温度",
        },
      ],
      options5: [
        {
          value: "关闭",
          label: "关闭",
        },
        {
          value: "低真空",
          label: "低真空",
        },
        {
          value: "高真空",
          label: "高真空",
        },
        {
          value: "对流",
          label: "对流",
        },
        {
          value: "氮气分压",
          label: "氮气分压",
        },
        {
          value: "氮氢分压",
          label: "氮氢分压",
        },
      ],
      options1: [
        {
          value: "热处理",
          label: "热处理",
        },
        {
          value: "自由锻",
          label: "自由锻",
        },
        {
          value: "模锻",
          label: "模锻",
        },
      ],
      options2: [
        {
          value: "2874638",
          label: "2874638",
        },
        {
          value: "2979373",
          label: "2979373",
        },
        {
          value: "2947092",
          label: "2947092",
        },
        {
          value: "192749",
          label: "192749",
        },
      ],
      options3: [
        {
          value: "工艺结束",
          label: "工艺结束",
        },
        {
          value: "关闭",
          label: "关闭",
        },
        {
          value: "升温",
          label: "升温",
        },
        {
          value: "保温",
          label: "保温",
        },
        {
          value: "降温",
          label: "降温",
        },
        {
          value: "淬火",
          label: "淬火",
        },
        {
          value: "等温淬火",
          label: "等温淬火",
        },
      ],
      options4: [
        {
          value: "SV",
          label: "SV",
        },
        {
          value: "PV",
          label: "PV",
        },
      ],
      formLabelAlign: {},
      formLabelAlign2: {},
      dialogVisible: false,
      processDialogVisible: false,
      activeName: "first",
      setHeight: 300,
      day: 0,
      hr: 0,
      min: 0,
      sec: 0,
    };
  },
  computed: {
    ...mapGetters(["workTableDataZ8", "deviceRowZ8"]),
  },
  mounted() {
    console.log("deviceRowZ8 :>> ", this.deviceRowZ8);
  },
  watch: {},
  methods: {
    // 曲线预览
    handlecurve() {
      this.curveDialogVisible = true;
    },
    openDialog() {
      // deviceRow
    },
    // 导入配方
    handleExportFrom() {
      this.formdDalogVisible = true;
    },
    // 工艺配方提交
    handeformlutSubmit() {
      this.$store.commit(
        "application/editWorkTableDataZ8",
        this.formLabelAlign2
      );
      this.$forceUpdate();
      this.$msg({
        type: "success",
        message: "修改成功",
      });
      this.processDialogVisible = false;
    },
    // 工艺配方编辑
    handeformlutEdit(row) {
      this.formLabelAlign2 = _.cloneDeep(row);
      this.processDialogVisible = true;
    },
    //关闭
    closeDrawer() {
      this.$emit("update:openScreen", false);
      this.$emit("screenCallback");
    },
    handMsg() {
      this.$msg({
        type: "success",
        message: "参数已下发!",
      });
    },
    handleClose1() {
      console.log("this.processDialogVisible :>> ", this.processDialogVisible);
      this.processDialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    headerRowStyle() {
      return "success-row";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    handleDel(index) {
      if (this.workTableDataZ8.length == 1) {
        this.$msg("保证有一条");
        return;
      }
      this.$store.commit("application/delWorkTableDataZ8", index);
    },
    addRow() {
      let row = _.cloneDeep(
        this.workTableDataZ8[this.workTableDataZ8.length - 1]
      );
      for (const key in row) {
        row[key] = "";
      }
      this.$store.commit("application/addWorkTableDataZ8", row);
    },
  },
};
</script>

<style lang='scss' scoped>
.bg_btns {
  display: flex;
  flex-wrap: nowrap;
}
.tab_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* height: 52px; */
  .title {
    font-size: 18px;
    color: #fff;
  }
}
/deep/ .work_dialog {
  background-color: #081f63 !important;
}
.WorkmanshipData {
  /deep/ .el-form {
    .el-form-item {
      margin-bottom: 6px;
      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        background-color: #0da9f2;
      }
      .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
        background-color: #0da9f2;
      }
      .el-select-dropdown {
        background-color: #081f63;
        /* color: #fff !important; */
        border: 1px solid #0da9f2;
        span {
          color: #fff;
        }
      }
      .el-input__inner {
        background: rgba(1, 11, 71, 0.74);
        border: 1px solid #0da9f2;
        color: #fff;
      }
    }
    .el-form-item__label {
      padding: 0;
      color: #fff;
    }
  }
  /deep/ .el-dialog {
    background-color: #021750;
    color: #ffffff;
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
    .el-form-item__label {
      color: #ffffff;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__header {
      background-color: #077bb3;
    }
  }
  /* height: 100%; */
  .icon_color {
    color: #5dcbff;
  }
  /deep/ .gutter {
    display: none;
  }
  /deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }

  .btns {
    display: flex;
    align-items: center;

    padding: 10px 16px;
    justify-content: flex-end;
    padding-left: 0;
    /deep/ .el-button--mini,
    .el-button--mini.is-round {
      padding-left: 0;
      padding-right: 0;
    }
    .img_btn {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
  }
  /deep/ .el-table {
    background-color: #093085 !important;
    border: 1px solid #0da9f2;
    .el-table__body tr.hover-row.current-row > td,
    .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
    .el-table__body tr.hover-row.el-table__row--striped > td,
    .el-table__body tr.hover-row > td {
      background-color: inherit !important;
    }
    .has-gutter {
      th {
        padding: 6px 0;
      }
    }
    .el-table__row:hover > td {
      background-color: inherit !important;
    }
    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }

    .el-table__row--striped:hover > td {
      background-color: inherit;
    }
    .warning-row {
      background: #093085 !important;
      color: #fff;
    }
    .success-row {
      background: #002675;
      color: #fff;
    }
  }
  .details3_box {
    /* background-color: inherit;
     */
    /* padding: 20px; */
    overflow: auto;
    /* height: 100%; */
  }
}
</style>